<template>
    <el-card :class="{'card-style':show}" shadow="never">
        <template #header>
          <span>{{header}}</span>
            <i  style="float: right;" @click="toggleCard">
            <template v-if="show">
              <el-icon><ArrowDown /></el-icon>
            </template>
            <template v-else>
              <el-icon><ArrowUp /></el-icon>
            </template>
          </i>
          <slot name="header"></slot>
        </template>
        <slot ></slot>
    </el-card>

</template>
<script setup>
import { ref } from 'vue';
import { ArrowDown,ArrowUp } from '@element-plus/icons-vue';
const show  = ref(false)

const toggleCard = ()=>{
  show.value = !show.value
}
const props = defineProps({
    header: {
        type: String,
        defalut: ''
    },
    show:{
      type:Boolean,
      defalut:false
    }
})
show.value = props.show
</script>
<style lang="less" scoped>
.el-card{
  margin-bottom: 10px;
}
.card-style{
    :deep(.el-card__header){
        padding: 10px !important;
        line-height: 22px;
        font-size: 16px;
        height: 45px;
        background: #f6f6f6;
    }
    :deep(.el-card__body){
        display: none;
        background: #ECF5FF;
    }
}  
.float-right {
    float: right;
  }
</style>
